<template>
  <PageMain :title="id ? '编辑' :'新增'">
    <div class="form-content f-c j-b">
      <div class="form-box">
        <el-form style="width: 660px" ref="formRef" :model="formData" :rules="rules" label-position="top" >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="企业名称" prop="name">
                <el-input placeholder="请输入" clearab v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业所在省市" prop="municipality">
                <el-cascader v-model="provinces" :options="provincesoptions" @change="handleChangeprovinces" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属产业" prop="categoryId">
                <el-select v-model="formData.categoryId">
                  <el-option v-for="item in categoryList" :label="item.name" :value="item.id" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否重点企业" prop="isAsterisk">
                <el-radio-group v-model="formData.isAsterisk">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业成立时间" prop="establishmentTime">
                <el-date-picker placeholder="请选择" clearab v-model="formData.establishmentTime" ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="固定电话" prop="mobile">
                <el-input v-model="formData.mobile" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人" prop="legalPerson">
                <el-input v-model="formData.legalPerson" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业详情" style="width: 100%" prop="details">
                <el-input clearab v-model="formData.details" type="textarea" :rows="5"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="经营范围" prop="scope">
                <el-input v-model="formData.scope" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="营业执照编码" prop="code">
                <el-input v-model="formData.code" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="formData.address" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业图片" style="width: 100%" prop="">
                <UploadImage v-model:image="formData.image" v-model:image-url="formData.imageUrl"/>

              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="form-button f-s">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </PageMain>
</template>
<script setup>
import {computed, ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {Plus} from "@element-plus/icons-vue";
import {ElLoading, ElMessage} from "element-plus";
import { httpUpload, http } from "@/api";
import {useStore} from "vuex";
const apiKey = 'enterpriseRes'
const router = useRouter()
const route = useRoute()
const categoryList = ref([])
http.industryCategory.list().then(res => {
  categoryList.value = res.data
})
const id = route.params.id
const provinces = ref([])
const store = useStore()
if (!store.getters.provincesoptions.length) {
  store.dispatch('getProvincesoptions')
}
const provincesoptions = computed(() => {
  return store.getters.provincesoptions
})
const handleChangeprovinces = (val) => {
  formData.value.province = val[0]
  formData.value.municipality = val[1]
}
const formData = ref({
  "address": "",
  "categoryId": '',
  "code": "",
  "details": "",
  "establishmentTime": "",
  "image": "",
  imageUrl: '',
  "isAsterisk": 0,
  "legalPerson": "",
  "mobile": "",
  "municipality": "",
  "name": "",
  "province": "",
  "scope": "",
})
const rules = ref({
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  categoryId: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  establishmentTime: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  isAsterisk: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  details: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  legalPerson: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  municipality: [
    { required: true, message: '请选择省市', trigger: 'blur' },
  ],
})
const formRef =  ref(null)
if (id) {
  // 获取详情
  http[[apiKey]].read({
    id
  }).then(res => {
    for (const valueKey in formData.value) {
      formData.value[valueKey] = res.data[valueKey]
    }
    formData.value.id = id
    provinces.value = [res.data.province, res.data.municipality]
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service()
      if (id) {
        // 编辑
        http[[apiKey]].update({
          ...formData.value,
          id
        }).then(res => {
          console.log(res)
          if (res.code === 0) {
            ElMessage.success('编辑成功')
            router.back()
          }
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        // 新增
        http[[apiKey]].create(formData.value).then(res => {
          console.log(res)
          if (res.code === 0) {
            ElMessage.success('新增成功')
            router.back()
          }
        }).finally(() => {
          loadingInstance.close()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>


<style lang="scss">
.form-box {
  display: flex;
  .gap {
    width: 32px;
  }
  .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
  }
}
</style>
